.flex_row_c_c {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.modalView {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  outline: 0;
  transform: scale(1.2);
  perspective: 2500upx;
  background: rgba(0, 0, 0, 0.6);
  transition: all .3s ease-in-out;
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 9999;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.posterImage {
  width: 70vw;
  height: 50vh;
}

.flex_row {
  display: flex;
  flex-direction: row;
}

.marginTop2vh {
  margin-top: 2vh;
}

.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.saveImgDiv{
  display: flex;
  justify-content: center;
  button{
    background-color:#8D31FF;
    border-radius:30rpx;
    color: #fff;
    font-size: 24rpx;
    padding: 10rpx 50rpx;
    &::after{
      border: none;
    }
    &:hover{
      background-color:rgba($color: #8D31FF, $alpha: 0.6);
    }
  }
}

.hideCanvasView {
  position: relative;
}

.hideCanvas {
  position: fixed;
  top: -99999upx;
  left: -99999upx;
  z-index: -99999;
}

button::after {

	border: none;

}

button {

	background-color: transparent;

	padding-left: 0;

	padding-right: 0;

	line-height:inherit;

}

button {

	border-radius:0;

}







.top{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	.yqm{
		width: 100%;
		text-align: center;
		color: #FFFFFF;
		font-size: 28rpx;
		margin-top: 88rpx;
		text{
			padding: 5rpx 20rpx;
			border: 1rpx solid #FFFFFF;
			margin-left: 20rpx;
			border-radius: 20rpx;
			opacity: 0.8;
		}
	}
	.place{
		width: 400rpx;
		height: 90rpx;
		// background-color: pink;
		position: absolute;
		left: 175rpx;
		bottom: 10rpx;
		border-radius: 40rpx;
		opacity: 0.1;
	}
}

.title{
	width: 90%;
	padding: 40rpx 5%;
	text-align: left;
	font-size: 32rpx;
	color: #212121;
	font-weight: bold;
}

.box{
	width: 90%;
	padding: 10rpx 5%;
	.boxIn{
		width: 100%;
		height: 500rpx;
		border: 1rpx solid #999999;
		.boxIn-top{
			width: 558rpx;
			// height: 301rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 40rpx auto;
			.top-left{
				width: 50%;
				border-right: 1rpx solid #999999;
				.available{
					width: 279rpx;
					height: 150rpx;
					border-bottom: 1rpx solid #999999;
					.available-price{
						display: block;
						width: 100%;
						font-size: 48rpx;
						color: #FF4242;
						font-weight: bold;
						text-align: center;
						padding: 10rpx 0;
					}
					.available-title{
						display: block;
						color: #212121;
						font-size: 28rpx;
						text-align: center;
					}
				}
				.have-available{
					width: 279rpx;
					height: 150rpx;
					.have-available-price{
						display: block;
						width: 100%;
						font-size: 48rpx;
						color: #333333;
						font-weight: bold;
						text-align: center;
						padding: 10rpx 0;
					}
					.have-available-title{
						display: block;
						color: #212121;
						font-size: 28rpx;
						text-align: center;
					}
				}
			}
			.top-right{
				width: 50%;
				.total{
					width: 279rpx;
					height: 150rpx;
					border-bottom: 1rpx solid #999999;
					.total-price{
						display: block;
						width: 100%;
						font-size: 48rpx;
						color: #FF4242;
						font-weight: bold;
						text-align: center;
						padding: 10rpx 0;
					}
					.total-title{
						display: block;
						color: #212121;
						font-size: 28rpx;
						text-align: center;
					}
				}
				
				.member{
					width: 279rpx;
					height: 150rpx;
					.member-num{
						display: block;
						width: 100%;
						font-size: 48rpx;
						color: #333333;
						font-weight: bold;
						text-align: center;
						padding: 10rpx 0;
					}
					.member-title{
						display: block;
						color: #212121;
						font-size: 28rpx;
						text-align: center;
					}
				}
			}
		}
		.btn{
			width: 340rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: linear-gradient(156deg, #796340 0%, #3D2B0D 100%);
			border-radius: 40px;
			font-size: 28rpx;
			color: #FFEAC9;
			text-align: center;
			margin: 40rpx auto;
		}
	}
}


.masks{
	width: 100vw;
	height: 100vh;
	background-color: rgba($color: #000000, $alpha: 0.4);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	.servise{
		width: 90%;
		height: 200rpx;
		padding: 0 5%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		// box-shadow: 0 -6rpx 10rpx  #DEE2E5;
		background-color: #FFFFFF;
		.share-btn{
			border: 0 !important;
			margin: 0;
			background-color: #FFFFFF;
			border-radius: 0 !important;
			.btn-img{
				margin: 10rpx auto;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
			text{
				display: block;
				font-size: 26rpx;
				color: #333333;
				text-align: center;
			}
		}
		.item{
			.img{
				margin: 10rpx auto;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 100rpx;
					height: 100rpx;
				}
			}
			text{
				display: block;
				font-size: 26rpx;
				color: #333333;
				text-align: center;
			}
		}
	}
}


.mask{
	width: 100vw;
	height: 100vh;
	background-color: rgba($color: #000000, $alpha: 0.4);
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	.servise{
		width: 540rpx;
		// height: 360rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 0 0 0;
		.se-title{
			width: 100%;
			font-size: 36rpx;
			text-align: center;
		}
		.se-subtitle{
			width: 100%;
			color: #808080;
			font-size: 30rpx;
			text-align: center;
			padding: 20rpx 0;
		}
		input{
			color: #999999;
			width: 410rpx;
			height: 40rpx;
			padding: 20rpx;
			margin: 30rpx auto;
			font-size: 28rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 20rpx;
		}
		.btn-box{
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-top: 1rpx solid #DDDDDD;
			.btn-item{
				width: 49%;
				padding: 20rpx 0;
				text-align: center;
			}
		}
	}
}

.maskActive{
	animation: open 1s ease;
}
.maskActiver{
	animation: out 1s ease;
}

@keyframes open{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
	
@keyframes out{
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}